<template>
    <div>
      <!-- 查询框 -->
      <el-input
        placeholder="请输入订单编号"
        v-model="searchText"
        style="width: 200px; margin-bottom: 20px;">
      </el-input>
      <el-button @click="fetchData" icon="el-icon-search" circle></el-button>
  
      <!-- 新增按钮 -->
      <el-button type="primary" @click="showCreateDialog" icon="el-icon-plus" style="margin-bottom: 10px;">新增订单</el-button>
  
      <!-- 列表展示 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="oid" label="订单编号" width="180">
          <template #default="scope">
        A00{{ scope.row.oid }}
      </template>
        </el-table-column>
        <el-table-column prop="uid" label="用户编号" width="180">
          <template #default="scope">
        A00{{ scope.row.uid }}
      </template>
        </el-table-column>
        <el-table-column prop="ostatu" label="订单状态" width="180"></el-table-column>
        <el-table-column prop="total" label="订单总金额" width="180"></el-table-column>
        <el-table-column prop="ptime" label="支付时间" width="180"></el-table-column>
        <el-table-column prop="address" label="收获地址" width="180"></el-table-column>
        <!-- 操作列 -->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button @click="viewDetails(scope.row.oid)" type="text" size="small">详情</el-button>
            <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="confirmDelete(scope.row.oid)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 新增和修改的对话框 -->
      <el-dialog :visible.sync="dialogVisible" :title="dialogTitle">
        <el-form :model="orderForm">
          <el-form-item label="订单编号" label-width="100px">
            <el-input v-model="orderForm.oid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品编号" label-width="100px">
            <el-input v-model="orderForm.pid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" label-width="100px">
            <el-input v-model="orderForm.snum" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveOrder">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
    
  import {listOrder,delOrder} from "@/api/order"
  export default {
    data() {
      return {
        tableData: [], // 表格数据
        searchText: '', // 查询框内容
        dialogVisible: false, // 对话框显示状态
        dialogTitle: '', // 对话框标题
        orderForm: { // 订单表单
          oid: '',
          pid: '',
          snum: ''
        }
      };
    },
    created() {
    this.fetchData();
  },
    methods: {
      // 获取数据
      fetchData() {
        listOrder(this.queryParams).then(response => {
        this.tableData = response.data;
      });
      },
      viewDetails(oid) {
        this.$router.push({ path: `/order/detail/${oid}` });
      },
      // 显示新增对话框
      showCreateDialog() {
        this.dialogTitle = '新增订单';
        this.orderForm = { oid: '', pid: '', snum: '' };
        this.dialogVisible = true;
      },
      // 显示修改对话框
      showEditDialog(order) {
        this.dialogTitle = '修改订单';
        this.orderForm = { ...order };
        this.dialogVisible = true;
      },
      confirmDelete(pid) {
      this.$confirm('确定要删除这项吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用接口删除产品
        this.deleteOrder(pid);
      }).catch(() => {
        // 用户点击取消，不做任何操作
      });
    },
   // 删除商品
   deleteOrder(oid) {
    delOrder(oid).then(() => {
        this.fetchData();
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      }).catch(error => {
        console.error('删除失败', error);
        this.$message.error('删除失败');
      });
    },
    
    }
}
 </script>
  